@keyframes fadeIn {
  from {
    opacity: 0;        
  }
  to {
    opacity: 1;        
  }
}

.bg{
  position:absolute;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background:rgba(0,0,0,0.7) ;
  animation: fadeIn 0.6s ease-out forwards;
}

.meet_font{
  position: absolute;
  left:50%;
  top:20%;
  transform: translate(-50%);
  font-size:22px;
  font-weight: bold;
  background: linear-gradient(to right, #b6d4fe 0%, #ffe6f2 30%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.circle_container{
  position: absolute;
  left:50%;
  top:25%;
  transform: translate(-50%);
  width: 100%;
  height: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle{
  width: 30vw;
  height: 30vw;
  border-radius: 50%;
  background:linear-gradient(to bottom,rgba(175,117,156,0.5),rgba(147,111,155,80),rgba(129,110,164,80));
  margin: 0 -8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 3px solid #c69dbf;
}

.box{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.text1{
  text-align: center;
  color:white;
  font-size:13px;
}

.shadow{
  position: absolute;
  width: 0; height:0; overflow: hidden;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 100px 100px rgba(255, 157, 255, 0.6);
  z-index: -1;
}

.Ball{
  height: 75%;
  width: 75%;
}

.name{
  font-size:12px;
  color:white;
}

.meet_time{
  color:#81f7ef;
  font-size:18px;
  font-weight: bold;
}

.know_btn{
  position: absolute;
  top:63%;
  left:50%;
  transform: translate(-50%);
  height: 5%;
  width: 35%;
  color:white;
  background-color: rgba(112,112,112,0.6);
  padding: 0;
  border-radius: 100px;
  font-size:15px;
  font-weight: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}


